<template>
  <div class="exam-list-container">
    <div class="exam-header">
      <h2>监考名单</h2>
      <div class="header-actions">
        <button class="export-btn" @click="exportData">
          <span>数据导出</span>
        </button>
      </div>
    </div>

    <div class="filter-section">
      <div class="filter-item">
        <label>请选择监考批次</label>
        <select v-model="filters.examBatch">
          <option value="">全部批次</option>
          <option v-for="batch in examBatches" :key="batch" :value="batch">{{ batch }}</option>
        </select>
      </div>
      <div class="filter-item">
        <label>请选择校区</label>
        <select v-model="filters.campus">
          <option value="">全部校区</option>
          <option v-for="campus in campuses" :key="campus" :value="campus">{{ campus }}</option>
        </select>
      </div>
    </div>

    <div class="exam-table">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>监考批次</th>
          <th>监考名称</th>
          <th>监考老师</th>
          <th>工号</th>
          <th>校区</th>
          <th>监考时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in filteredItems" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.batch }}</td>
          <td>{{ item.examName }}</td>
          <td>{{ item.teacher }}</td>
          <td>{{ item.workId }}</td>
          <td>{{ item.campus }}</td>
          <td>{{ item.examTime }}</td>
          <td>
            <button class="action-btn view" @click="viewDetails(item)">
              查看详情
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination">
      <span>总共 {{ totalItems }} 个</span>
      <div class="pagination-controls">
        <button v-for="page in pageCount" :key="page"
                :class="['page-btn', currentPage === page ? 'active' : '']"
                @click="currentPage = page">
          [{{ page }}]
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';

interface ExamItem {
  id: number;
  batch: string;
  examName: string;
  teacher: string;
  workId: string;
  campus: string;
  examTime: string;
}

const items = ref<ExamItem[]>([
  { id: 1, batch: '2023年4月研究生监考', examName: '研究生入学考试', teacher: '张老师', workId: '10001', campus: '南湖校区', examTime: '2023-04-15 09:00' },
  { id: 2, batch: '2023年5月研究生监考', examName: '研究生期中考试', teacher: '李老师', workId: '10002', campus: '南湖校区', examTime: '2023-05-20 14:00' },
  { id: 3, batch: '2023年6月研究生监考', examName: '研究生期末考试', teacher: '王老师', workId: '10003', campus: '余家头校区', examTime: '2023-06-25 09:00' },
  { id: 4, batch: '2023年4月研究生监考', examName: '研究生入学考试', teacher: '赵老师', workId: '10004', campus: '余家头校区', examTime: '2023-04-15 09:00' },
  { id: 5, batch: '2023年5月研究生监考', examName: '研究生期中考试', teacher: '刘老师', workId: '10005', campus: '南湖校区', examTime: '2023-05-20 14:00' },
]);

const examBatches = ref([
  '2023年4月研究生监考',
  '2023年5月研究生监考',
  '2023年6月研究生监考',
  '2023年7月研究生监考'
]);

const campuses = ref([
  '南湖校区',
  '余家头校区',
  '新校区'
]);

const filters = reactive({
  examBatch: '',
  campus: ''
});

const currentPage = ref(1);
const itemsPerPage = 5;

const filteredItems = computed(() => {
  let result = items.value;

  if (filters.examBatch) {
    result = result.filter(item => item.batch === filters.examBatch);
  }

  if (filters.campus) {
    result = result.filter(item => item.campus === filters.campus);
  }

  return result;
});

const totalItems = computed(() => filteredItems.value.length);
const pageCount = computed(() => Math.ceil(totalItems.value / itemsPerPage));

function viewDetails(item: ExamItem) {
  alert(`查看 ${item.teacher} 的监考详情`);
}

function exportData() {
  alert('导出监考名单数据');
}
</script>

<style scoped>
.exam-list-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.exam-header h2 {
  margin: 0;
  color: #1a2b4b;
  font-size: 20px;
  font-weight: 600;
}

.filter-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  flex: 1;
}

.filter-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.filter-item select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.exam-table {
  overflow-x: auto;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: center;
  border: 1px solid #ebeef5;
}

th {
  background-color: #f5f7fa;
  color: #1a2b4b;
  font-weight: 600;
}

tbody tr:hover {
  background-color: #f5f7fa;
}

.action-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.view {
  background-color: #e6f7ff;
  color: #1890ff;
}

.view:hover {
  background-color: #bae7ff;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
}

.pagination-controls {
  display: flex;
  gap: 5px;
}

.page-btn {
  padding: 5px 10px;
  background-color: #f0f2f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.page-btn:hover {
  background-color: #e2e8f0;
}

.page-btn.active {
  background-color: #1a3a6c;
  color: white;
}
</style>